<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/html/reset.css">
    <style>
        .box {
            width: 710px;
            margin: 100px auto;
            text-align: center;
        }

        .infor {
            display: flex;
            flex-flow: column nowrap;
        }

        .infor .luru-infor {
            margin: 50px 0;
        }

        input,
        select:focus {
            outline: none;
        }

        input {
            width: 60px;
        }

        select,
        input {
            border: 1px solid rgb(174, 218, 229);
            padding: 0 5px;
            height: 22px;
            border-radius: 4px;
            margin-right: 15px;
        }

        .btn {
            background-color: rgb(49, 43, 101);
            color: white;
            border-radius: 5px;
            width: 50px;
            font-size: 12px;
        }

        .jiuye {
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
        }

        .table {
            margin: 20px 0;
            width: 710px;
        }

        thead {
            background-color: aquamarine;
        }

        thead th {
            font-weight: normal;
            font-size: 16px;
            height: 40px;
        }

        tbody td {
            height: 40px;
        }

        .jilutiao {
            width: 710px;
            height: 40px;
            display: flex;
            justify-content: end;
            background-color: aquamarine;
            align-items: center;
            padding-right: 10px;
            box-sizing: border-box;
        }

        .shujuliang {
            color: red;
            margin: 0 5px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="infor">
            <h2>新增学员</h2>
            <div class="luru-infor">
                <form action="" class="infos">
                    姓名：<input type="text" id="names" name="nams">
                    年龄：<input type="text" id="age" name="age">
                    性别：<select name="sex" id="sex">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                    薪资：<input type="text" id="money" name="money">
                    就业城市：<select name="city" id="city">
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="长沙">长沙</option>
                        <option value="广东">广东</option>
                        <option value="杭州">杭州</option>
                        <option value="深圳">深圳</option>
                        <option value="长春">长春</option>
                    </select>
                    <button class="btn">录入</button>
                </form>

            </div>

            <div class="jiuye">
                <h2>就业榜</h2>
                <div class="jilutiao">
                    <p>共有数据<span class="shujuliang">0</span>条</p>
                </div>
                <table border="1" class="table">
                    <thead>
                        <tr>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>薪资</th>
                            <th>就业城市</th>
                            <th>录入时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>

                    <script>
                        const data = [
                            {
                                stuId: 1,
                                uname: '李四',
                                age: 20,
                                gender: '男',
                                money: '12000',
                                city: '北京',
                                time: '2025/5/20 10:20:30'
                            }
                        ]

                        // localStorage.setItem('data', JSON.stringify(data))
                        let shuju = JSON.parse(localStorage.getItem('data')) || []
                        // console.log(shuju);
                        const tbody = document.querySelector('tbody')
                        const shujuliang = document.querySelector('.shujuliang')
                        const forminfo = document.querySelector('.infos')


                        function render() {
                            // map
                            let trarr = shuju.map((item, index) => {
                                return `
                            <tr>
                            <td>${item.stuId}</td>
                            <td>${item.uname}</td>
                            <td>${item.age}</td>
                            <td>${item.gender}</td>
                            <td>${item.money}</td>
                            <td>${item.city}</td>
                            <td>${item.time}</td>
                            <td><a href="#" data-id='${index}'>删除</a></td>
                        </tr>
                            `
                            })
                            // console.log(trarr);
                            tbody.innerHTML = trarr.join('')
                            shujuliang.innerHTML = shuju.length

                        }
                        render()

                        const names = document.querySelector('#names')
                        const age = document.querySelector('#age')
                        const sex = document.querySelector('#sex')
                        const money = document.querySelector('#money')
                        const city = document.querySelector('#city')


                        const items = new Date()
                        // 提交表单

                        forminfo.addEventListener('submit', (e) => {
                            // 阻止表单默认跳转
                            e.preventDefault()

                            if (!names.value && !age.value && !money.value) {
                                return alert('请输入不为空的内容')
                            }
                            shuju.push({
                                stuId: shuju.length ? shuju[shuju.length - 1].stuId + 1 : 1,
                                uname: names.value,
                                age: age.value,
                                gender: sex.value,
                                money: money.value,
                                city: city.value,
                                time: items.toLocaleString()
                            })
                            render()
                            forminfo.reset()
                            // clearInterval(settime)
                            localStorage.setItem('data', JSON.stringify(shuju))

                            if (shuju.length === 0) {
                                shuju.stuId = 1
                            }
                        })
                        tbody.addEventListener('click', function (e) {
                            if (e.target.tagName === 'A') {
                                // console.log(e.target.dataset.id);

                                if (confirm('你确定需要删除这条数据吗？')) {
                                    shuju.splice(e.target.dataset.id, 1)
                                    render()
                                    localStorage.setItem('data', JSON.stringify(shuju))
                                }
                            }

                        })


                    </script>
</body>

</html>